
<template>
<div class="loginWrap">
  <div class="loginBox">
    <img src="../../assets/logo/logo.png" alt="" />

    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <!-- 用户名 -->
      <el-form-item prop="user">
        <el-input
          type="password"
          v-model="ruleForm.user"
          autocomplete="off"
          placeholder="请输入用户名"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="pass" class="passInput">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
          placeholder="请输入密码"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>

      <!-- 验证码链接 -->
      <el-row>
        <router-link to="codeLogin" class="codeLogin">
          验证码登录
        </router-link
        >
      
      </el-row>

      <!-- 登录按钮 -->
      <el-row>
        <el-button type="primary" class="submitBtn" @click="submitForm('ruleForm')">登录</el-button>
      </el-row>

      <!-- 注册 and tip -->
      <el-row>
          <router-link to="register" class="registerBtn">注册</router-link></el-col>
          <router-link to="latecomer" class="tipBtn">
          <strong>Latecomer</strong><span>是什么？</span></router-link>
      </el-row>
    </el-form>
  </div>
</div>
</template>
<script>
export default {
  data() {
    // 用户名
    var validatorUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
    };
    // 密码
    var validatorPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }else if(value.length <=6){
        return callback(new Error("密码长度不能小于6位"));
      }
    };

    return {
      ruleForm: {
        user: "",
        pass: ""
      },
      rules: {
        user: [{ validator: validatorUser, trigger: "blur" }],
        pass: [{ validator: validatorPass, trigger: "blur" }]
      },
    };
  },
  methods: {
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
      this.$router.push({path:'../Home'})
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang="less">
.fontLine {
  height: 40px;
  line-height: 40px;
  text-decoration: none;
}
.loginWrap {
  width: 100%;
  height: 100vh;
  background-color: #2d3a4b;
}
.loginBox {
  position: relative;
  width: 420px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
  > img {
    width: auto;
    .fontLine();
    margin: 15px auto;
  }
  .passInput {
    margin-bottom: 0px;
  }
  .codeLogin {
    display: block;
    float: right;
    .fontLine();
    color: #999;
    font-size: 14px;
    text-decoration: none;
  }
  .submitBtn {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .registerBtn {
    float: left;
    .fontLine();
    color: #409eff;
  }
  .tipBtn {
    float: right;
    .fontLine();
    strong {
      color: #0099df;
      margin-right: 5px;
      font-size: 16px;
    }
    span {
      color: #999;
      font-size: 16px;
    }
  }
}
.el-form-item__error {
  line-height: 30px;
}
html,
body {
  height: 100vh;
  background: #999;
}
</style>
<style lang="less">
.el-form-item__content input {
  &:focus {
    border-color: #9e9e9e !important;
  }
}
.el-form-item.is-error .el-input__inner {
  border-color: #9e9e9e !important;
}
</style>